<template>
  <div class="unitWrapper">
    <div class="unitTop">
      <div class="unitTitleContainer">
        <div class="unitFlag"></div>
        <div class="unitTitle">等级薪酬</div>
      </div>
      <div class="saveBtns" v-if="!isSuperToken && false">
        <div class="contentItemEditAndAIBtn AIBtn" @click="aiCreate()">
          <img src="@/assets/detail/AI_white.png" />
          {{ aiCreateStatus ? "AI正在生成中 . . ." : "AI生成" }}
        </div>
        <div class="contentItemEditAndAIBtn" @click="handleEditClick">
          <img src="@/assets/detail/edit_white.png" />
          {{ currentEdit ? "退出编辑" : "编辑" }}
        </div>
        <div class="contentItemEditAndAIBtn saveEditBtn" @click="save()"
          v-if="isAdmin == true && currentEdit && !editAll">
          <!-- <img src="@/assets/detail/save.png" /> -->
          保存
        </div>
      </div>
    </div>
    <div :class="{
        unitContent: true,
      }">
      <salaryChart :chartData="chartData" />
      <div class="right-salary">
        <div class="salary-item" v-for="(item, index) in chartData.city" :key="index">
          <div class="top">{{ item }}平均薪酬约</div>
          <div class="bottom">
            <span class="dollar">¥</span><span>{{ chartData.salary[index] }}</span>/月
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import salaryChart from "./salaryChart";
import { getPositionGradeSalary } from "@/api/salary";
export default {
  name: "levelSalary",
  components: {
    salaryChart,
  },
  props: {
    isSuperToken: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chartData: {
        city: ["入门", "初级", "中级", "高级"],
        salary: ["10", "29", "33", "35"],
      },
    };
  },
  methods: {
    changeActiveIndex(index) {
      this.activeIndex = index;
    },
    // 辅助函数，用于格式化日期为 yyyy-mm-dd 格式

    formatDate(date) {
      const year = date.getFullYear();
      const month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以需要+1
      const day = ("0" + date.getDate()).slice(-2);
      return `${year}-${month}-${day}`;
    },
    async getPositionGradeSalaryFn() {
      const params = {
        id: this.$route.query.id,
        // 获取今天的日期
        endTime: this.formatDate(new Date()),
        // 获取六个月前的日期
        beginTime: this.formatDate(
          new Date(new Date().setMonth(new Date().getMonth() - 6))
        ),
        regionIds: "100000",
      };
      const res = await getPositionGradeSalary(params);
      if (res.code == 200) {
        console.log("----------getPositionGradeSalary------------->res", res);
        if (res.data.length > 0) {
          this.chartData.city = [];
          this.chartData.salary = [];
          res.data.forEach((item) => {
            this.chartData.city.push(item.expCodeStr);
            this.chartData.salary.push(item.salaryNum);
            // this.chartData.salary.push((item.salaryNum / 1000).toFixed(2));
          });
        }
      }
    },
  },
  mounted() {
    this.getPositionGradeSalaryFn();
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "D-DIN-PRO-700-Bold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf");
}

.unitWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 56px;
  // height: 100px;
  .unitTop {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // background: linear-gradient(260deg, #48a8ff 0%, #1470fa 100%);
    border-radius: 8px 8px 0px 0px;
    opacity: 0.87;
    // padding: 10px 18px;
    .unitTitleContainer {
      display: flex;
      align-items: center;
      .unitFlag {
        width: 5px;
        height: 15px;
        background: #4880ff;
        border-radius: 3px;
        margin-right: 8px;
      }
      .unitTitle {
        height: 25px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        letter-spacing: 0.3px;
        color: #000000;
        line-height: 25px;
      }
    }

    .saveBtns {
      display: flex;
      height: 32px;
      align-items: center;
      justify-content: center;
      padding-right: 10px;
      .contentItemEditAndAIBtn {
        line-height: 32px;
        margin: 0 10px 0 15px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 22px;
          height: 22px;
        }
      }
      .saveEditBtn {
        width: 57px;
        height: 26px;
        color: #3674ff;
        background-color: #fff;
        border-radius: 4px;
        justify-content: center;
      }
    }
  }
  .unitContent {
    height: 300px;
    background: #ffffff;
    border-radius: 0px 0px 8px 8px;
    // border: 1px solid #D7E4FF;
    // padding: 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    .right-salary {
      width: 310px;
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      align-content: flex-start;
      padding-top: 40px;
      .salary-item {
        width: 138px;
        height: 68px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        margin: 0;
        padding: 3px 0 4px 0;
        box-sizing: border-box;
        margin-bottom: 30px;
        .top {
          font-size: 16px;
          color: #555555;
        }
        .bottom {
          color: #1b78ff;
          font-size: 18px;
          .dollar {
            font-size: 16px;
          }
          span {
            font-family: D-DIN-PRO-700-Bold;
            font-size: 26px;
          }
        }
      }
    }
  }

  ::v-deep .el-input__inner {
    height: 32px;
    background: #eeeeee;
    border-radius: 2px;
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
    line-height: 24px;
    outline: none;
  }
}
</style>
